<template>
  <div class="l-tab-page pd-8" style="overflow-y: auto;padding-bottom: 0;">
    <el-row :gutter="8">
      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>阅读时长统计图</span>
          </div>
          <l-echarts :option="basicOptions" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>运动爱好统计图</span>
          </div>
          <l-echarts :option="multipleBar" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区粮食产量统计图</span>
          </div>
          <l-echarts :option="horizontaiBar" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区人员出行统计图</span>
          </div>
          <l-echarts :option="stackBar" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>家庭周度收支统计图</span>
          </div>
          <l-echarts :option="waterFallBar" style="height:280px" />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card class="mb-8">
          <div slot="header">
            <span>地区周度收支条形图</span>
          </div>
          <l-echarts :option="horizontaiBar2" style="height:280px" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          top: "10%",
          bottom: "10%",
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      }
    };
  },
  computed: {
    basicOptions() {
      let option = this.$deepClone(this.option);
      option.color = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: "#6f86d6" },
          { offset: 1, color: "#48c6ef" },
        ],
      };
      return option;
    },
    multipleBar() {
      let option = this.$deepClone(this.option);
      option.legend.data = ["篮球", "足球", "乒乓球", "羽毛球"];
      option.xAxis.data = ["一班", "二班", "三班", "四班", "五班"];
      option.series = [
        {
          name: "篮球",
          type: "bar",
          barGap: 0,
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#6f86d6" },
                  { offset: 1, color: "#48c6ef" },
                ],
              },
            },
          },
        },

        {
          name: "足球",
          type: "bar",

          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#fda085" },
                  { offset: 1, color: "#f6d365" },
                ],
              },
            },
          },
        },
        {
          name: "乒乓球",
          type: "bar",

          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#38f9d7" },
                  { offset: 1, color: "#f6d365" },
                ],
              },
            },
          },
        },
        {
          name: "羽毛球",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          data: [98, 77, 101, 99, 40],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#f5576c" },
                  { offset: 1, color: "#f093fb" },
                ],
              },
            },
          },
        },
      ];
      return option;
    },
    horizontaiBar() {
      let option = this.$deepClone(this.option);
      option.xAxis = {
        type: "value",
        boundaryGap: [0, 0.01],
      };
      option.yAxis = {
        type: "category",
        data: ["一区", "二区", "三区", "四区", "五区", "六区"],
      };
      option.series = [
        {
          name: "2011",
          type: "bar",
          data: [18203, 23489, 29034, 104970, 131744, 630230],
          itemStyle: {
            normal: {
              barBorderRadius: [0, 10, 10, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#fee140" },
                  { offset: 1, color: "#fa709a" },
                ],
              },
            },
          },
        },
        {
          name: "2012",
          type: "bar",
          data: [19325, 23438, 31000, 121594, 134141, 681807],
          itemStyle: {
            normal: {
              barBorderRadius: [0, 10, 10, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#009efc" },
                  { offset: 1, color: "#2af598" },
                ],
              },
            },
          },
        },
      ];
      return option;
    },
    stackBar() {
      let option = this.$deepClone(this.option);
      option.series = [
        {
          name: "步行",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "自行车",
          type: "bar",
          stack: "Adr",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "电动车",
          type: "bar",
          stack: "Adr",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "打车",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "开车",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "公交车",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
      ];
      return option;
    },
    waterFallBar() {
      let option = this.$deepClone(this.option);
      option.tooltip = {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        formatter: function(params) {
          let tar;
          if (params[1].value !== "-") {
            tar = params[1];
          } else {
            tar = params[0];
          }
          return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
        },
      };
      option.legend.data = ["收入", "支出"];
      option.series = [
        {
          name: "结余",
          type: "bar",
          stack: "Total",
          itemStyle: {
            borderColor: "transparent",
            color: "transparent",
          },
          emphasis: {
            itemStyle: {
              borderColor: "transparent",
              color: "transparent",
            },
          },
          data: [0, 900, 1245, 1530, 1376, 1376, 1511],
        },
        {
          name: "收入",
          type: "bar",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          data: [900, 345, 393, "-", "-", 135, 178],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#009efd" },
                  { offset: 1, color: "#2af598" },
                ],
              },
            },
          },
        },
        {
          name: "支出",
          type: "bar",
          stack: "Total",
          label: {
            show: true,
            position: "bottom",
          },
          data: ["-", "-", "-", 108, 154, "-", "-"],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#f5576c" },
                  { offset: 1, color: "#f093fb" },
                ],
              },
            },
          },
        },
      ];
      return option;
    },
    horizontaiBar2() {
      let option = this.$deepClone(this.option);
      option.legend.data = ["毛利", "支出", "收入"];
      option.xAxis = [
        {
          type: "value",
        },
      ];

      option.yAxis = [
        {
          type: "category",
          axisTick: {
            show: false,
          },
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
      ];
      option.series = [
        {
          name: "毛利",
          type: "bar",
          label: {
            show: true,
            position: "inside",
            color: "black",
          },
          emphasis: {
            focus: "series",
          },
          data: [200, 170, 240, 244, 200, 220, 210],
          itemStyle: {
            normal: {
              barBorderRadius: [0, 10, 10, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#66a6ff" },
                  { offset: 1, color: "#89f7fe" },
                ],
              },
            },
          },
        },
        {
          name: "收入",
          type: "bar",
          stack: "Total",
          label: {
            show: true,
            color: "black",
          },
          emphasis: {
            focus: "series",
          },
          data: [320, 302, 341, 374, 390, 450, 420],
          itemStyle: {
            normal: {
              barBorderRadius: [0, 10, 10, 0],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#38f9d7" },
                  { offset: 1, color: "#43e97b" },
                ],
              },
            },
          },
        },
        {
          name: "支出",
          type: "bar",
          stack: "Total",
          label: {
            show: true,
            position: "left",
          },
          emphasis: {
            focus: "series",
          },
          data: [-120, -132, -101, -134, -190, -230, -210],
          itemStyle: {
            normal: {
              barBorderRadius: [10, 0, 0, 10],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#f5576c" },
                  { offset: 1, color: "#f093fb" },
                ],
              },
            },
          },
        },
      ];
      return option;
    },
  }
};
</script>
